<template>
  <section>
    <section class="mk-add-pop">
      <el-form ref="formAdd" :model="form" :rules="rules" label-width="100px">
        <mk-get-row>
          <el-form-item label="旅行Id" prop="travel_id">
            <el-input v-model="form.travel_id" size="mini" class="input-one" clearable placeholder="请输入旅行id"></el-input>
          </el-form-item>
          <el-form-item label="城市" prop="city">
            <el-input v-model="form.city" size="mini" class="input-one" clearable placeholder="请输入城市名称"></el-input>
          </el-form-item>
        </mk-get-row>
        <mk-get-row>
          <el-form-item label="坐标" prop="latitude">
            <el-tag size="mini" style="margin-right: 8px">经度：{{form.latitude || '-'}}</el-tag>
            <el-tag size="mini" style="margin-right: 8px">纬度：{{form.longitude || '-'}}</el-tag>
            <el-button @click="()=>{this.show.map=!this.show.map}" size="mini">{{this.show.map?'选取完成':'选取坐标'}}
            </el-button>
          </el-form-item>
        </mk-get-row>
        <div style="margin-bottom: 10px">
          <mk-map-select v-if="show.map" @closeMap="()=>{this.show.map=false}" @mapClick="mapClick"/>
        </div>
        <mk-get-row>
          <el-form-item label="城市图片" prop="planImgs">
            <el-input clearable v-model.trim="form.planImgs" size="mini" style="width: 600px" type="textarea"
                      :rows="3"
                      placeholder="请输入在线图片地址"
            />
            <mk-upload v-model="form.planImgs"/>
          </el-form-item>
        </mk-get-row>
        <mk-get-row>
          <el-form-item label="旅行日期" size="mini" prop="planDate">
            <el-date-picker
              value-format="yyyy-MM-dd"
              type="date"
              class="input-one"
              clearable
              v-model="form.planDate"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </mk-get-row>
        <mk-get-row>
          <el-form-item label="持续时间" prop="duration">
            <el-input v-model="form.duration" size="mini" class="input-one" clearable placeholder="请输入持续时间"></el-input>
          </el-form-item>
          <el-form-item label="是否完成" prop="isDone">
            <el-radio-group size="mini" class="input-one" clearable placeholder="请输入是否完成" v-model="form.isDone">
              <el-radio :label="true">已完成</el-radio>
              <el-radio :label="false">待完成</el-radio>
            </el-radio-group>
          </el-form-item>
        </mk-get-row>
        <mk-get-row>
          <el-form-item label="计划内容" prop="planTxt">
            <el-input v-model="form.planTxt" size="mini" style="width: 600px" type="textarea"
                      :rows="3" clearable placeholder="请输入计划内容"></el-input>
          </el-form-item>
        </mk-get-row>
        <mk-get-row>
          <el-form-item label="备注" prop="mark">
            <el-input v-model="form.mark" size="mini" style="width: 600px" type="textarea"
                      :rows="3" clearable placeholder="请输入备注"></el-input>
          </el-form-item>
        </mk-get-row>
        <el-divider/>
        <mk-get-button @save="save" @close="close(true)"/>
      </el-form>
    </section>
  </section>

</template>

<script>
import MkGetRow from '@/components/common/mk-get-row'
import MkGetButton from '@/components/common/mk-get-button'
import MkBackList from '@/components/common/mk-back-list'
import { dirSocialsCreate, dirSocialsUpdate } from '@/api/modules/sys.socials.api'
import MkUpload from '@/components/common/mk-upload'
import MkMap from '@/components/common/mk-map'
import MkMapSelect from '@/components/myWord/mk-map-select'
import {
  dirTravelCreate,
  dirTravelCreateDetail,
  dirTravelUpdate,
  dirTravelUpdateDetail
} from '@/api/modules/sys.travel.api'

export default {
  name: 'get-travel-detail',
  components: { MkMapSelect, MkMap, MkUpload, MkBackList, MkGetButton, MkGetRow },
  props: {
    updateData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  created () {
    if (this.updateData && this.updateData.add) {
      this.form.travel_id = this.updateData.id
      this.isAdd = true
    } else {
      this.form = this.updateData
      this.isAdd = false
    }
  },
  data () {
    return {
      commonKey: 0,
      show: {
        map: false
      },

      form: {
        img: '',
        latitude: 26.646694,
        longitude: 106.628201
      },
      isAdd: true,
      rules: {
        travel_id: [{ required: true, message: '请输入旅行id', trigger: 'blur' }],

        city: [{ required: true, message: '请输入地点', trigger: 'blur' }],

        latitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],

        longitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }],

        planDate: [{ required: true, message: '请输入旅行计划日期', trigger: 'blur' }],

        duration: [{ required: true, message: '请输入持续时间', trigger: 'blur' }],

        isDone: [{ required: true, message: '请输入是否完成', trigger: 'blur' }]

      }
    }
  },
  methods: {
    save () {
      this.$refs.formAdd.validate((valid) => {
        if (valid) {
          let _FUC = ''
          _FUC = this.isAdd ? dirTravelCreateDetail : dirTravelUpdateDetail
          _FUC(this.form).then(res => {
            this.$toast.success(this.isAdd ? '添加成功！' : '修改成功！')
            this.$emit('close', true)
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close (show) {
      if (show) {
        this.$toast.confirmSave().then(() => {
          this.$emit('close')
        })
      } else {
        this.$emit('close')
      }
    },
    mapClick (e) {
      this.form.latitude = e.latLng.lat
      this.form.longitude = e.latLng.lng
      this.form.city = e.poi?.name || ''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
